<template>
  <div class="page">
      <div id="selectPart" class="selectPart">
        <h3>成像方式</h3>
        <a-select default-value="CT" style="width: 120px" @change="imagingChange">
            <a-select-option value="CT">
                CT影像
            </a-select-option>
            <a-select-option value="MRI">
                MRI影像
            </a-select-option>
            <a-select-option value="BU" >
                B超影像
            </a-select-option>
            <a-select-option value="XRay">
                X射线影像
            </a-select-option>
        </a-select>
        <h3>检测内容</h3>
        <a-select default-value="Lung" style="width: 120px" @change="positionChange">
            <a-select-option value="Lung">
                肺肿瘤
            </a-select-option>
            <a-select-option value="Bone">
                骨肿瘤
            </a-select-option>
            <a-select-option value="Breast">
                乳腺肿瘤
            </a-select-option>
        </a-select>
        <h3>成像方向</h3>
        <a-select default-value="Transverse" style="width: 120px" @change="directionChange">
            <a-select-option value="Transverse">
                水平面
            </a-select-option>
            <a-select-option value="Frontale">
                冠状面
            </a-select-option>
            <a-select-option value="Sagittal">
                矢状面
            </a-select-option>
        </a-select>
      </div>
      <a-divider />
      <div class="usingPart">
          <div id="info" class="info"></div>
          <div id="in" class="in"></div>
          <div id="out" class="out"></div>
      </div>
  </div>
</template>
<script>
export default {
    data(){
        return{
            imaging:"",
            position:"",
            direction:""
        }
    },
    methods: {
        imagingChange(value) {
            this.imaging = value
        },
        positionChange(value){
            this.position = value
        },
        directionChange(value){
            this.direction = value
        }
    },
};
</script>
<style lang="scss" scoped>
.selectPart{
    display: flex;
    h3{
        margin-top: 0.4vh;
        margin-left: 4vh;
        margin-right: 1vh;
    }
}
.usingPart{
    display: flex;
    padding: 1vh;
    .info{
        width: 50%;
        height: 70vh;
        box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 30%);
        border-radius: 5px;
    }
    .in{
        width: 50%;
        height: 50%;
        box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 30%);
        border-radius: 5px;
    }
    .out{
        width: 50%;
        height: 50%;
        box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 30%);
        border-radius: 5px;
    }
}
</style>